import React, { Component } from 'react'
import { Avatar, Button, List, Skeleton } from 'antd';
import { DeleteOutlined } from '@ant-design/icons'
const CommentList = ({ comments }) => (
  <List
    dataSource={comments}
    // 天寿
    header={`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`}
    itemLayout="horizontal"
    // 当使用 dataSource 时，可以用 renderItem 自定义渲染列表项; Comment是引入antd
    renderItem={item => (
      <List.Item
        key={item.datetime}
        actions={[<Button icon={<DeleteOutlined />}></Button>]}
      >
        <Skeleton avatar title={false} loading={false} active>
          <List.Item.Meta
            avatar={
              <Avatar src={item.avatar || '/topaz-blog/qq.jpg'} alt={item.email} />
            }
            title={item.author}
            description={item.content}
          />
          {/* <div>{item.content}</div> */}
        </Skeleton>
      </List.Item>
    )}
  // moment().fromNow()
  />
);
export default class Skill extends Component {
  render() {
    const list = [{
      author: 'email',
      avatar: 'avatar',
      content: 'value',
      datetime: new Date().getTime()
    }]
    return (
      <div>
        高傲质量
        <CommentList comments={list} />
      </div>
    )
  }
}
